<template>
    <div>
        <div class="hear-1">
            <div class="hear-con1 pu-con">
                <span>欢迎访问江苏省广告协会1</span>
                <span>
                    <router-link to="/login" v-if="!loginState"
                        >登录 / 注册</router-link
                    >
                    <el-dropdown v-if="loginState">
                        <span class="el-dropdown-link" style="cursor: pointer;">
                            {{ user.nickName || user.mobile }}
                            <i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <!-- <el-dropdown-item>
                                <router-link to="/personal">个人中心</router-link>
                            </el-dropdown-item> -->
                            <el-dropdown-item>
                                <router-link to @click.native="onSignOut"
                                    >退出登录</router-link
                                >
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <a href="JavaScript:;" class="weix">
                        <p>官方微信</p>
                        <span>
                            <img src="../assets/28.png" alt />
                        </span>
                    </a>
                </span>
            </div>
        </div>
        <div class="hear-2 pu-con">
            <router-link to>
                <img src="../assets/1.png" alt />
            </router-link>
            <div>
                <input
                    v-model="seachName"
                    type="text"
                    placeholder="请输入您要输入的关键字！"
                />
                <router-link
                    :to="{
                        path: '/news/list',
                        query: { type: 6, title: seachName },
                    }"
                >
                    <button style="outline:none;">
                        <i class="iconfont iconsousuo"></i>
                    </button>
                </router-link>
            </div>
        </div>
        <div class="hear-3">
            <div class="nav pu-con">
                <router-link
                    v-for="(item, index) in navList"
                    :key="index"
                    :to="{ path: item.path }"
                >
                    <p>{{ item.name }}</p>
                </router-link>
            </div>
        </div>
    </div>
</template>

<script>
import navList from "@/views/jssggxh/home/navList";
export default {
    data() {
        return {
            seachName: "",
            user: {},
            navList: navList,
        };
    },
    created() {
        this.user = this.$store.getters.user;
    },
    methods: {
        onSignOut() {
            this.$store.dispatch("user/resetToken");
        },
    },
    computed: {
        loginState() {
            return this.$store.getters.name;
        },
    },
};
</script>

<style scoped>
.hear-1 {
    background-color: rgb(238, 238, 238);
}
.hear-1 > div {
    display: flex;
    align-items: center;
    height: 35px;
    justify-content: space-between;
}
.hear-1 > div > span {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #333;
}
.hear-1 > div > span a {
    font-size: 13px;
    color: #333;
    margin-left: 10px;
}
.hear-2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px 0;
}
.hear-2 div {
    border: 1px solid rgb(160, 160, 160);
    width: 316px;
    height: 35px;
    display: flex;
    position: relative;
    margin-right: 45px;
}

.hear-2 div input {
    border: 0;
    flex: 1;
    padding: 0 10px;
    box-sizing: border-box;
    outline: none;
}
.hear-2 div button {
    border: 0;
    border-left: 1px solid rgb(160, 160, 160);
    height: 35px;
    width: 50px;
    background: #fff;
    cursor: pointer;
    outline: none;
}
.hear-3 {
    background-color: rgb(55, 31, 117);
}
.hear-3 > div {
    display: flex;
    align-items: center;
}
.hear-3 > div a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 45px;
    color: #fff;
    font-size: 17px;
}
.hear-3 > div a img {
    margin-left: 10px;
}
.hear-3 > div > a:hover {
    background-color: rgb(40, 22, 85);
}
.weix {
    position: relative;
    display: flex;
    align-items: center;
    padding-right: 20px;
}
.weix:hover span {
    display: block;
}
.weix span {
    position: absolute;
    width: 140px;
    height: 140px;
    top: 36px;
    left: 0;
    z-index: 5555;
    display: none;
}

.weix span img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin-left: 0 !important;
}
.jsgg img {
    width: 35px;
    position: absolute;
    top: 0;
    right: -45px;
}
</style>
